<template>
  <div>
    <div class="form_wrap">
      <div class="search_wrap">
        <el-input v-model="searchText"></el-input>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </div>
      <div>
        <el-button type="success" @click="add()">添加</el-button>
      </div>
    </div>
    <el-dialog
      @close="clo()"
      width="40%"
      :title="titleText"
      :visible.sync="myDiaFlag"
    >
      <el-form ref="myform" class="myform" :model="addObj" :rules="ruleForm">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addObj.userName"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="turename">
          <el-input v-model="addObj.turename"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="addObj.phone"></el-input>
        </el-form-item>
        <el-form-item label="权限选择">
          <el-select v-model="addObj.power">
            <el-option value="1" label="系统管理员"></el-option>
            <el-option value="2" label="课程管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="success" @click="addAdmin">{{ diaBtn }}</el-button>
        <el-button type="danger" @click="close">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { _addAdmin, _editAdmin } from '../../api/admin'
export default {
  data () {
    return {
      titleText: '添加管理员',
      diaBtn: '确定',
      searchText: '', //搜索字段
      addObj: {
        //v-model的数据
        userName: '',
        tokenId: '',
        turename: '',
        phone: '',
        password: '123456',
        power: null
      },
      ruleForm: {
        //表单的验证
        userName: { required: true, message: '用户名必填', trigger: 'blur' },
        turename: { required: true, message: '姓名必填', trigger: 'blur' },
        phone: {
          pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
          message: '手机格式错误',
          trigger: 'blur'
        }
      }
    }
  },
  created () {
    // 监听点击编辑传来的数据
    this.$bus.$on('sendRow', row => {
      console.log(row)
      this.addObj.tokenId = row.tokenId
      this.addObj.userName = row.userName
      this.addObj.phone = row.phone
      this.addObj.power = row.power
      this.addObj.turename = row.turename
      this.titleText = '修改管理员'
      this.diaBtn = '确认修改'
    })
  },
  computed: {
    myDiaFlag () {
      // 父组件的弹出层控制变量
      return this.$parent.diaFlag
    }
  },
  methods: {
    toSearch () {
      //搜索
      this.$parent.searchText = this.searchText
      this.$parent.getAdmin() //添加后 从新获取列表
      this.searchText = ''
    },
    clo () {
      //关闭弹出层
      this.$parent.diaFlag = false
    },
    close () {
      //关闭弹出层
      this.$parent.diaFlag = false
    },
    add () {
      // 修改父组件的数据
      this.$parent.diaFlag = true
      // 表单重置
      this.addObj.tokenId = ''
      this.addObj.userName = ''
      this.addObj.phone = ''
      this.addObj.power = null
      this.addObj.turename = ''
      this.titleText = '添加管理员'
      this.diaBtn = '确定'
    },
    addAdmin () {
      // 添加或修改管理员
      this.$refs.myform.validate(async valid => {
        if (valid) {
          if (this.addObj.tokenId) {
            // 修改管理员
            var editRes = await _editAdmin(this.addObj)
          } else {
            // 调用添加管理员接口
            var res = await _addAdmin(this.addObj)
            console.log(res)
          }
          this.$message.success('更新管理员成功')
          this.$refs.myform.resetFields()
          this.$parent.diaFlag = false //关闭弹出层
          this.$parent.getAdmin() //添加后 从新获取列表
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.form_wrap {
  display: flex;
  padding: 20px 80px;
  justify-content: space-between;
  .search_wrap {
    display: flex;
  }
}
.myform {
  .el-input {
    width: 600px;
  }
}
</style>
